import React, { CSSProperties } from 'react';
import { AccountBookOutlined, DatabaseOutlined } from '@ant-design/icons';
import './index.less';

interface StatisticsCard {
  iconType?: 'database' | 'accountbook';
  title?: string;
  style?: CSSProperties;
  number?: number | string;
}

const Index: React.FC<StatisticsCard> = (props) => {
  const { style, iconType, title, number } = props;
  return (
    <div style={{...style}} className="statistics-card">
      {
        iconType === 'database' ? <DatabaseOutlined className="icon"/> : <AccountBookOutlined className="icon"/>
      }
      <div className="statistics-card-content">
        <div className="title">{title}</div>
        <div className="num">{number}</div>
      </div>
    </div>
  );
};

export default Index;
